
<template>
  <div class="login">
    <div class="login-before" v-show="login_before">
      <div class="login-before-top">
        <div class="login-before-top-logo">
          <img src="../assets/login/logo.png" style="width: 20%; height: 20%" />
        </div>
        <div class="login-before-top-title">
          <p>Hi，你好</p>
        </div>
      </div>
      <div class="login-connet">
        <div class="login-connet-part">
          <div class="login-connet-part-top">
            <el-input v-model.trim="tel" placeholder="手机号"></el-input>
          </div>

          <div class="login-connet-part-bottom">
            <div class="login-connet-part-bottom-left">
              <el-input
                v-model.trim="num"
                type="text"
                placeholder="验证码"
              ></el-input>
            </div>
            <div class="login-connet-part-bottom-right">
              <p>发送验证码</p>
            </div>
          </div>
        </div>
        <div class="login-button">
          <div
            class="login-button-part"
            @click="
              login_after = true;
              login_before = false;
            "
          >
            <p>登录</p>
          </div>
          <div class="login-button-part">
            <p>注册</p>
          </div>
        </div>
      </div>
    </div>
    <div class="login-after" v-show="login_after">
      <div class="login-after-top">
        <img
          src="../assets/login/login_top.png"
          style="
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 0;
            border-radius: 14px 14px 0 0;
          "
        />
        <img
          src="../assets/login/shezhi.png"
          class="shezhi"
          @click="usermodelview = !usermodelview"
        />
        <p class="nickName">Hi！昵称！</p>
      </div>
      <div class="login-after-title">
        <div class="login-after-title-left">
          <p>我的订单</p>
        </div>
        <div class="login-after-title-right">
          <div class="login-after-title-right-button">
            <p>全部订单</p>
          </div>
        </div>
      </div>
      <div class="order">
        <!-- v-for="(item,index) in 4" :key="index" -->
        <div class="order-list">
          <div class="order-list-img">
            <p>0</p>
          </div>
          <div class="order-list-title">
            <p>申请中</p>
          </div>
        </div>
        <div class="order-list">
          <div class="order-list-img">
            <p>0</p>
          </div>
          <div class="order-list-title">
            <p>审核中</p>
          </div>
        </div>
        <div class="order-list">
          <div class="order-list-img">
            <p>1</p>
          </div>
          <div class="order-list-title">
            <p>待收货</p>
          </div>
        </div>
        <div class="order-list">
          <div class="order-list-img">
            <p>0</p>
          </div>
          <div class="order-list-title">
            <p>租用中</p>
          </div>
        </div>
      </div>
      <div class="menu">
        <div class="menu-part" v-for="(item, index) in menu" :key="index">
          <div class="menu-part-img">
            <img :src="item.img" style="width: 24px; height: 24px" />
          </div>
          <div class="menu-part-title">
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
      <transition name="el-fade-in-linear">
        <div class="usermodel" v-show="usermodelview">
          <div class="usermodel-connet">
            <div class="usermodel-connet-part">
              <div class="usermodel-connet-part-list">
                <div class="usermodel-connet-part-list-icon">
                  <img
                    src="../assets/login/user.png"
                    style="width: 20px; height: 24px"
                  />
                </div>
                <div class="usermodel-connet-part-list-title">
                  <p>个人信息</p>
                </div>
              </div>
              <div class="usermodel-connet-part-list">
                <div class="usermodel-connet-part-list-icon">
                  <img
                    src="../assets/login/gaimima.png"
                    style="width: 20px; height: 20px"
                  />
                </div>
                <div class="usermodel-connet-part-list-title">
                  <p>修改密码</p>
                </div>
              </div>
              <div class="usermodel-connet-part-list">
                <div class="usermodel-connet-part-list-icon">
                  <img
                    src="../assets/login/xiaoxi.png"
                    style="width: 20px; height: 20px"
                  />
                </div>
                <div class="usermodel-connet-part-list-title">
                  <p>消息中心</p>
                </div>
              </div>
              <div class="usermodel-connet-part-list">
                <div class="usermodel-connet-part-list-icon">
                  <img
                    src="../assets/login/dizhi.png"
                    style="width: 20px; height: 24px"
                  />
                </div>
                <div class="usermodel-connet-part-list-title">
                  <p>管理收货地址</p>
                </div>
              </div>
              <div class="usermodel-connet-part-list">
                <div class="usermodel-connet-part-list-icon">
                  <img
                    src="../assets/login/tuichu.png"
                    style="width: 20px; height: 24px"
                  />
                </div>
                <div
                  class="usermodel-connet-part-list-title"
                  @click="
                    login_after = false;
                    login_before = true;
                  "
                >
                  <p>退出登录</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      login_before: true,
      login_after: false,
      tel: "",
      num: "",
      setUrl: require("../assets/login/shezhi.png"),
      menu: [
        {
          img: require("../assets/login/maiduan.png"),
          title: "我要买断",
        },
        {
          img: require("../assets/login/jiaoyi.png"),
          title: "我要归还",
        },
        {
          img: require("../assets/login/zhifuzujin.png"),
          title: "支付租金",
        },
        {
          img: require("../assets/login/qvan.png"),
          title: "领卷中心",
        },
        {
          img: require("../assets/login/bangzhu.png"),
          title: "帮助中心",
        },
        {
          img: require("../assets/login/tousujianyi.png"),
          title: "投诉建议",
        },
      ],
      smallList: [
        { img: "../assets/login/user.png", title: "个人信息" },
        { img: "../assets/login/gaimima.png", title: "修改密码" },
        { img: "../assets/login/xiaoxi.png", title: "消息中心" },
        { img: "../assets/login/dizhi.png", title: "管理收货地址" },
        { img: "../assets/login/tuichu.png", title: "退出登录" },
      ],
      countList: [
        { count: 0, title: "申请中" },
        { count: 0, title: "审核中" },
        { count: 1, title: "待收货" },
        { count: 0, title: "租用中" },
      ],
      usermodelview: false,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
p {
  text-align: center;
}
.login {
  width: 24%;
  height: 50%;
  background-color: #fff;
  border-radius: 0.1rem;
}
.login-before {
  width: 100%;
  height: 100%;
}
.login-before-top {
  width: 100%;
  margin-top: 15%;
}
.login-before-top-logo {
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.login-before-top-title {
  width: 100%;
  height: 30%;
  margin: 5% 0;
  font-size: 0.16rem;
}
.login-connet {
  width: 100%;
  height: 54%;
  display: flex;
  justify-content: center;
  align-content: space-between;
  flex-wrap: wrap;
}
.login-connet-part {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-around;
}
.login-connet-part-top {
  width: 100%;
  margin: 3% 0;
  margin: 0 auto;
}
.login-connet-part-bottom {
  width: 100%;
}
.login-connet-part-bottom-left {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-connet-part-bottom-right {
  background-color: #eaeaea;
  width: 40%;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0.1rem 0.1rem 0;
  position: relative;
  margin-top: -0.4rem;
  margin-left: -2px;
  float: right;
  color: #7f7f7f;
  cursor: pointer;
}
.login-button {
  margin: 5%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.login-button-part {
  padding: 0% 12%;
  line-height: 0.03rem;
  background-color: red;
  color: white;
  border-radius: 0.1rem;
}
.login-after {
  width: 100%;
  height: 100%;
}
.login-after-top {
  width: 100%;
  height: auto;
  border-radius: 0.1rem;
  background-color: red;
}
.shezhi {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 22;
  top: -68px;
  left: calc(100% - 32px);
}
.nickName {
  position: relative;
  z-index: 22;
  top: -48px;
  left: 12px;
  font-size: 16px;
  color: white;
}
.login-after-title {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}
.login-after-title-left {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}
.login-after-title-right {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-after-title-right-button {
  width: 90%;
  height: 78%;
  background-color: red;
  font-size: 14px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
}
.order {
  width: 100%;
  height: 52px;
  display: flex;
  justify-content: space-around;
  border-bottom: #f7f7f7 solid 1px;
  cursor: pointer;
}
.order-list {
  width: 25%;
  height: 100%;
}
.order-list-img {
  width: 100%;
  height: 60%;
  color: red;
  font-size: 0.24rem;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}
.order-list-title {
  width: 100%;
  height: 40%;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-weight: 500;
}
.menu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 3%;
}
.menu-part {
  width: 33%;
  box-sizing: border-box;
  height: 50%;
}
.menu-part-img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-part-title {
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.usermodel {
  width: 15%;
  position: absolute;
  margin-top: -23%;
  left: 85%;
}
.usermodel::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-bottom: solid 0.1rem #fff;
  border-left: solid 0.1rem transparent;
  border-right: solid 0.2rem transparent;
  bottom: 100%;
  left: 60%;
}
.usermodel-connet {
  width: 100%;
  height: calc(100% - 16px);
  background-color: white;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.usermodel-connet-part {
  width: 90%;
  height: 90%;
}
.usermodel-connet-part-list {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-between;
}
.usermodel-connet-part-list-icon {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.usermodel-connet-part-list-title {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
}
</style>

<style>
.login-connet-part .el-input__inner {
  height: 0.4rem;
  background-color: rgb(234, 234, 234);
  border-radius: 0.1rem;
  margin-top: 2%;
  outline: none;
}
</style>